<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理仪表盘 - 新闻分析系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        .stat-card {
            transition: transform 0.2s ease;
        }
        .stat-card:hover {
            transform: translateY(-5px);
        }
        .admin-action-btn {
            margin-right: 0.5rem;
        }
        .chart-container {
            position: relative;
            height: 300px;
        }
    </style>
</head>
<body class="bg-light">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" th:href="@{/admin/dashboard}">管理后台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link active" href="/admin/dashboard">仪表盘</a>
                </li>
            </ul>
            <ul class="navbar-nav ms-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/" target="_blank">
                        <i class="bi bi-box-arrow-up-right"></i> 查看前台
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container my-4">
    <!-- 统计卡片 -->
    <div class="row mb-4">
        <div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
            <div class="card bg-primary text-white h-100 stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">新闻总数</h6>
                            <h2 class="mb-0 mt-2">306</h2>
                        </div>
                        <i class="bi bi-newspaper fs-1"></i>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="/admin/news" class="text-white text-decoration-none">
                        管理新闻 <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 mb-4 mb-lg-0">
            <div class="card bg-success text-white h-100 stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">用户总数</h6>
                            <h2 class="mb-0 mt-2">48</h2>
                        </div>
                        <i class="bi bi-people fs-1"></i>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="/admin/users" class="text-white text-decoration-none">
                        管理用户 <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3 mb-4 mb-md-0">
            <div class="card bg-warning text-dark h-100 stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">情感分布</h6>
                            <h2 class="mb-0 mt-2">3</h2>
                        </div>
                        <i class="bi bi-emoji-smile fs-1"></i>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="/analysis/sentiment" class="text-dark text-decoration-none">
                        查看情感分析 <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>

        <div class="col-md-6 col-lg-3">
            <div class="card bg-info text-white h-100 stat-card">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h6 class="mb-0">类别分布</h6>
                            <h2 class="mb-0 mt-2">8</h2>
                        </div>
                        <i class="bi bi-tags fs-1"></i>
                    </div>
                </div>
                <div class="card-footer">
                    <a href="/analysis/category" class="text-white text-decoration-none">
                        查看类别分析 <i class="bi bi-arrow-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="row mb-4">
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-pie-chart me-2"></i>新闻类别分布
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="categoryChart"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="bi bi-emoji-smile me-2"></i>新闻情感分布
                    </h5>
                </div>
                <div class="card-body">
                    <div class="chart-container">
                        <canvas id="sentimentChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 热门新闻列表 -->
    <div class="card shadow-sm">
        <div class="card-header bg-warning text-dark">
            <h5 class="mb-0">
                <i class="bi bi-fire me-2"></i>热门新闻
            </h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="table-light">
                    <tr>
                        <th>标题</th>
                        <th>类别</th>
                        <th>情感</th>
                        <th>热度</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>中国队在世界羽毛球锦标赛夺得三金</td>
                        <td>
                            <span class="badge bg-primary">体育</span>
                        </td>
                        <td>
                            <span class="badge bg-success">正面</span>
                        </td>
                        <td>
                            <span class="badge bg-danger rounded-pill">95</span>
                        </td>
                        <td>
                            <a href="/news/7" class="btn btn-sm btn-outline-primary admin-action-btn" target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="/admin/news/edit/7" class="btn btn-sm btn-outline-warning admin-action-btn">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>国产大型量子计算机研发取得突破</td>
                        <td>
                            <span class="badge bg-primary">科技</span>
                        </td>
                        <td>
                            <span class="badge bg-success">正面</span>
                        </td>
                        <td>
                            <span class="badge bg-danger rounded-pill">96</span>
                        </td>
                        <td>
                            <a href="/news/13" class="btn btn-sm btn-outline-primary admin-action-btn" target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="/admin/news/edit/13" class="btn btn-sm btn-outline-warning admin-action-btn">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>CBA总决赛：辽宁队获得冠军</td>
                        <td>
                            <span class="badge bg-primary">体育</span>
                        </td>
                        <td>
                            <span class="badge bg-success">正面</span>
                        </td>
                        <td>
                            <span class="badge bg-danger rounded-pill">93</span>
                        </td>
                        <td>
                            <a href="/news/9" class="btn btn-sm btn-outline-primary admin-action-btn" target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="/admin/news/edit/9" class="btn btn-sm btn-outline-warning admin-action-btn">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>俄罗斯与白俄罗斯举行联合军事演习</td>
                        <td>
                            <span class="badge bg-primary">军事</span>
                        </td>
                        <td>
                            <span class="badge bg-danger">负面</span>
                        </td>
                        <td>
                            <span class="badge bg-danger rounded-pill">92</span>
                        </td>
                        <td>
                            <a href="/news/4" class="btn btn-sm btn-outline-primary admin-action-btn" target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="/admin/news/edit/4" class="btn btn-sm btn-outline-warning admin-action-btn">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>第98届奥斯卡颁奖典礼完美落幕</td>
                        <td>
                            <span class="badge bg-primary">娱乐</span>
                        </td>
                        <td>
                            <span class="badge bg-success">正面</span>
                        </td>
                        <td>
                            <span class="badge bg-danger rounded-pill">94</span>
                        </td>
                        <td>
                            <a href="/news/9" class="btn btn-sm btn-outline-primary admin-action-btn" target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="/admin/news/edit/9" class="btn btn-sm btn-outline-warning admin-action-btn">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    <tr>
                        <td>国务院召开经济形势分析会议</td>
                        <td>
                            <span class="badge bg-primary">政治</span>
                        </td>
                        <td>
                            <span class="badge bg-success">正面</span>
                        </td>
                        <td>
                            <span class="badge bg-danger rounded-pill">91</span>
                        </td>
                        <td>
                            <a href="/news/3" class="btn btn-sm btn-outline-primary admin-action-btn" target="_blank">
                                <i class="bi bi-eye"></i>
                            </a>
                            <a href="/admin/news/edit/3" class="btn btn-sm btn-outline-warning admin-action-btn">
                                <i class="bi bi-pencil"></i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    // 类别分布数据
    const categoryData = {
        '政治': 42,
        '军事': 35,
        '体育': 58,
        '科技': 63,
        '经济': 47,
        '教育': 29,
        '健康': 22,
        '娱乐': 10
    };

    // 情感分布数据
    const sentimentData = {
        '正面': 178,
        '负面': 42,
        '中性': 86
    };

    // 类别分布图表
    new Chart(document.getElementById('categoryChart'), {
        type: 'pie',
        data: {
            labels: Object.keys(categoryData),
            datasets: [{
                data: Object.values(categoryData),
                backgroundColor: [
                    'rgba(255, 99, 132, 0.7)',   // 红色
                    'rgba(54, 162, 235, 0.7)',   // 蓝色
                    'rgba(255, 206, 86, 0.7)',   // 黄色
                    'rgba(75, 192, 192, 0.7)',   // 青色
                    'rgba(153, 102, 255, 0.7)',  // 紫色
                    'rgba(255, 159, 64, 0.7)',   // 橙色
                    'rgba(199, 199, 199, 0.7)',  // 灰色
                    'rgba(83, 102, 255, 0.7)'    // 蓝紫色
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });

    // 情感分布图表
    new Chart(document.getElementById('sentimentChart'), {
        type: 'doughnut',
        data: {
            labels: Object.keys(sentimentData),
            datasets: [{
                data: Object.values(sentimentData),
                backgroundColor: [
                    'rgba(40, 167, 69, 0.7)',   // 正面-绿色
                    'rgba(220, 53, 69, 0.7)',   // 负面-红色
                    'rgba(108, 117, 125, 0.7)'  // 中性-灰色
                ],
                borderWidth: 1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right'
                }
            }
        }
    });
</script>
</body>
</html>